<template>
	<view class="video-player">
		<swiper class="video-swiper" vertical :duration="duration" @change="handleVideoChange" :current="currentIndex">
			<template v-for="(item, index) in videoData" :key="index">
				<swiper-item class="video-swiper-item" @click.stop="handleTogglePlay">
					<video
						v-if="index === currentIndex"
						:id="'myVideo' + index"
						class="video"
						:src="item.detail ? item.detail[0].video_url : item.video_url"
						:initial-time="0"
						:controls="false"
						:show-play-btn="false"
						:show-center-play-btn="false"
						:enable-progress-gesture="false"
						object-fit="fill"
						:loop="true"
						:autoplay="true"
						:custom-cache="false"
						@pause="handleVideoPause"
						@play="handleVideoPlay"
					>
						<i @click.stop></i>
						<image class="video-pause" src="@/static/images/icons/pause_big.png" mode="widthFix" v-show="isShowPause && index == currentIndex"></image>
					</video>
					
					
					
					<view class="video-action-follow" @click.stop="handleFollowClick(item)">
						<image
							v-if="item.detail ? item.detail[0].isFollow == 1 : item.isFollow == 1"
							class="video-action-icon"
							src="@/static/images/icons/follow_red.png"
							mode="widthFix"
						></image>
						<image v-else class="video-action-icon" src="@/static/images/icons/follow_white.png" mode="widthFix"></image>
						<text>追剧</text>
					</view>

					<view class="video-episode" :style="{ bottom: episodeBottom + 'rpx' }">
						<view class="episode-title">{{ item.script_name }}</view>
						<view class="episode-subtitle">第{{ item.detail ? item.detail[0].current_episode : item.current_episode }}集</view>
					</view>

					<view class="video-bottom" v-if="needVideoBottom">
						<view class="video-bottom-left" @click.stop="handleSelectClick(item, -1, 1)">共{{ item.total }}集</view>
						<view class="video-bottom-right" @click.stop="handleSelectClick(item, 1, -1)">下一集</view>
					</view>
				</swiper-item>
			</template>
		</swiper>

		<view class="mid-mask" v-if="isShowMidMask"></view>
	</view>
</template>

<script setup>
	import useCommonStore from '@/stores/common/common.js';
	import { ref, onMounted, nextTick, watch, getCurrentInstance, computed } from 'vue';

	// - props/emit
	const props = defineProps({
		videoData: {
			type: Array,
			default: () => []
		},
		// total: {
		// 	type: Number,
		// 	required: true
		// },
		needVideoBottom: {
			type: Boolean,
			default: () => false
		},
		episodeBottom: {
			type: Number,
			default: () => 100
		}
	});
	const emit = defineEmits(['fetchMoreVideoData', 'openSelect', 'getCurrentInfo', 'followClick','likeClick']);

	// - stores
	const commonStore = useCommonStore();

	// - data
	const _this = getCurrentInstance();
	const currentIndex = ref(0); // 控制video是否渲染
	const isShowPause = ref(false);
	const duration = ref(400);
	const isShowMidMask = ref(false);

	// - computed
	const currentIndexCpt = computed(() => {
		return currentIndex.value;
	});

	// - watch
	watch(currentIndex, () => {
		isShowPause.value = false; // 切换时恢复暂停按钮默认值
	});

	// # methods
	// 初始化数据
	const initVideoData = () => {
		emit('fetchMoreVideoData'); // 获取数据
	};
	// 监听视频滑动切换
	const handleVideoChange = (e) => {
		let current = e.detail.current; // 当前滑块的索引
		currentIndex.value = current;

		if (props.videoData.length === current) {
			uni.showToast({
				title: '没有更多数据了！',
				icon: 'none'
			});
		}

		// 当只剩1个视频未看时开始加载数据 (已废弃，暂不做分页)
		// if (props.videoData.length === current + 1) {
		// 	if (props.videoData.length < props.total) {
		// 		emit('fetchMoreVideoData');
		// 	} else {
		// 		uni.showToast({
		// 			title: '没有更多数据了！',
		// 			icon: 'none'
		// 		});
		// 	}
		// }
	};
	// 监听视频播放
	const handleVideoPlay = () => {
		isShowPause.value = false;

		const rememberItem = props.videoData[currentIndex.value];
		commonStore.rememberReviewHistoryData(rememberItem);
	};
	// 监听视频暂停
	const handleVideoPause = () => {
		isShowPause.value = true;
	};
	// 手动切换视频的播放/暂停状态
	const handleTogglePlay = () => {
		let videoContext = uni.createVideoContext('myVideo' + currentIndex.value, _this);

		if (isShowPause.value) {
			videoContext.play();
		} else {
			videoContext.pause();
		}

		videoContext = null;
	};
	// 点击选集
	const handleSelectClick = (item, isNext = -1, isOpen = -1) => {
		let current_episode = 1;
		if (item.detail.length > 1) {
			current_episode = props.videoData.detail[currentIndex.value].current_episode;
		} else {
			current_episode = 1;
		}

		uni.navigateTo({
			url: `/pages_details/player/player?id=${item.id}&current_episode=${current_episode}&skipId=${item.skit_id}&isNext=${isNext}&isOpen=${isOpen}`
		});
	};
	// 追剧
	const handleFollowClick = (item) => {
		emit('followClick', item);
	};
	

	// 播放指定集
	const turnToN = (n) => {
		currentIndex.value = Number(n);

		isShowMidMask.value = true;
		setTimeout(() => {
			isShowMidMask.value = false; // 此操作是为了遮盖切换视频时的滑动
		}, 500);
	};
	// 播放当前的下一级
	const turnToNext = () => {
		currentIndex.value += 1;
	};

	// # lifecycle
	// onMounted(() => {
	// 	initVideoData();
	// });

	defineExpose({ turnToNext, turnToN, currentIndexCpt });
</script>

<style lang="scss">
	.video-player {
		width: 100%;
		height: 100%;

		.video-swiper {
			width: 100%;
			height: 100%;

			.video-swiper-item {
				width: 100%;
				height: 100%;
				background-color: #000000;

				.video {
					width: 100%;
					height: 100%;
				}
				.video-action-follow,
				.video-action-like {
					position: absolute;
					bottom: 200rpx;
					right: 35rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: #ffffff;
					transition: all 0.3s ease;

					display: flex;
					flex-direction: column;
					align-items: center;

					.video-action-icon {
						width: 62rpx;
						height: 62rpx;
						margin-bottom: 15rpx;
					}
				}
				.video-action-like{
					bottom: 369rpx;
				}

				.video-episode {
					position: absolute;
					bottom: 100rpx;
					left: 40rpx;
					color: #ffffff;
					font-weight: bold;

					.episode-title {
						font-size: 36rpx;
					}

					.episode-subtitle {
						font-size: 28rpx;
						margin-top: 20rpx;
					}
				}

				.video-bottom {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					height: 72rpx;
					background: rgba(0, 0, 0, 0.4);
					font-size: 30rpx;
					font-weight: 500;
					color: #ffffff;
					box-sizing: border-box;
					padding: 0 32rpx 0 34rpx;

					.video-bottom-left {
					}
					.video-bottom-right {
					}
				}

				.video-pause {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					width: 148rpx;
					height: 148rpx;
					transition: all 0.3s ease;
				}
			}
		}

		.mid-mask {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
			background-color: #000000;
		}
	}
</style>
